<template>
  <div class="com-middle">
    <ul
      class="list"
      v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="loading"
      :infinite-scroll-distance="10"
    >
      <div class="item" ref="left">
        <transition-group tag="div" name="fade">
          <li v-for="(item, idx) in listLeft" :key="'left_' + idx">
            <img
              class="img"
              :src="`http://placehold.it/800x${item.img}`"
              alt=""
            />
            <div class="tit">
              {{ item.txt }}
            </div>
          </li>
        </transition-group>
      </div>
      <div class="item" ref="right">
        <transition-group tag="div" name="fade">
          <li v-for="(item, idx) in listRight" :key="'right_' + idx">
            <img
              class="img"
              :src="`http://placehold.it/800x${item.img}`"
              alt=""
            />
            <div class="tit">
              {{ item.txt }}
            </div>
          </li>
        </transition-group>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { img: 100, txt: 1 },
        { img: 500, txt: 2 },
      ],
      listLeft: [],
      listRight: [],
      loading: false,
    };
  },
  mounted() {
    // 模拟数据
    for (let i = 0; i < 10; i++) {
      this.list.push(this.createItemData());
    }
    // 初始化
    this.initList();
  },
  methods: {
    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:36
     * @desc: 加载更多
     */
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        this.pushMoreItem();
      }, 2500);
    },
    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:36
     * @desc: 初始化界面
     */
    initList() {
      this.list.forEach(async (item) => {
        await this.pushItem(item);
      });
    },

    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:36
     * @desc: push单个数据进数组
     */
    pushItem(item) {
      return new Promise((resolve) => {
        this.$nextTick(() => {
          setTimeout(() => {
            let left = this.$refs.left;
            let right = this.$refs.right;
            let leftHeight = left.offsetHeight;
            let rightHeight = right.offsetHeight;
            if (leftHeight <= rightHeight) {
              this.listLeft.push(item);
            } else {
              this.listRight.push(item);
            }
            resolve();
          }, 300);
        });
      });
    },
    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:37
     * @desc: push多个节点进数组
     */
    async pushMoreItem(length = 10) {
      for (let i = 1; i < length; i++) {
        let item = this.createItemData();
        await this.pushItem(item);
      }
    },
    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:38
     * @desc: 获取随机数
     */
    getRandom() {
      let num = Math.random();
      num = num * 1000;
      num = Math.floor(num);
      return num;
    },
    /**
     * @Author: luo1o1o1o
     * @QQ: 330240995, @PHONE: 17600071321
     * @Date: 2021-06-05 10:38
     * @desc: 制造节点
     */
    createItemData() {
      let i = this.getRandom();
      let re = {
        img: i,
        txt: i,
      };
      return re;
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  font-size: 0;
  .item {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    .img {
      width: 100%;
    }
    .tit {
      padding: 10px 0;
      font-size: 18px;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
